<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
		<style type="text/css">
			/* .fade-enter,.fade-leave-to{
				opacity: 0;
			}
			.fade-enter-active,.fade-leave-active{
				transition: opacity .5s;
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<button v-on:click="show = !show">
					Toggle
				  </button>
				<transition name="fade" :duration="{ enter: 500, leave: 800 }">
					<button-counter v-if="show" title="false"></button-counter>
				</transition>
			  </div>
			<test></test>
			<lgz-btn @my-event="myevent" :title="title" :fq="fq"></lgz-btn>
		</div>
		<script type="text/javascript">
			Vue.component('button-counter', {
				props: ['title'],
				data: function() {
					return {}
				},
				template: '<div><h1>hi...{{title}}</h1></div>',
				methods: {

				}
			});
			var lgzBtn = {
				inheritAttrs: false,
				props: ['title'],
				data: function() {
					return {}
				},
				template: `<div><h1>hi...{{title.name}} age is {{title.age}}</h1>
							<h1 @click="chufa" v-bind="$attrs">hi...{{people.name}} age is {{people.age}}</h1>
							{{pp}}
							his wife is{{cc}}
							</div>
				`,
				methods: {
					chufa(){
						this.$emit("my-event")
					}
				},
				computed: {
					people() {
						return {
							age: this.title.age + 1,
							name: this.title.name + "ss"
						}
					},
					pp(){
						return this.$attrs.fq
					},
					cc(){
						return this.$root.spouse
					}
					
				}
			}

			var vm = new Vue({
				el: "#app",
				data: {
					title: {
						name: "lgz",
						age: 18,
						ni:"以上所述是小编给大家介绍的中文正则表达式匹配问题之正则表达式中文匹配使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！"
					},
					fq: "Alive",
					spouse:"shili",
					show:true
				},
				methods: {
					clicknow: function(e) {
						console.log(e);
					},
					myevent(){
					}
				},
				components: {
					test: {
						template: "<h2>h2...</h2>"
					},
					lgzBtn
				}
			});
		</script>
		<style type="text/css">

		</style>
	</body>
</html>
